<template>
	<view :disabled="codeDisAbeld" @click="requestSendCode" class="zy-text-whitegrey code"
		:class="{'code-disable': codeDisAbeld}">{{codeText}}</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	const codeDisAbeld = ref(false)
	const codeText = ref('获取验证码')

	const props = defineProps({
		account: {
			type: String
		}
	})

	const requestSendCode = () => {
		const param = {
			phoneNumbers: props.account,
			sendType: '1',
			areaCode: '+86'
		};
		uni.$http.post('/api/sendSms', param)
			.then(res => {
				countDown()
				uni.$toast.showToast('短信已发送')
			})
	}

	const countDown = () => {
		let seconds = 60;
		codeDisAbeld.value = true;
		let timer = setInterval(() => {
			seconds--;
			codeText.value = seconds + 's';
			if (seconds === 0) {
				clearInterval(timer);
				codeText.value = '获取验证码';
				codeDisAbeld.value = false;
			}
		}, 1000);
	}
</script>

<style lang="scss" scoped>
	.code {
		padding: 10rpx 20rpx;
		opacity: 1;
	}

	.code-disable {
		opacity: $zy-opacity-disabled;
		color: $zy-color-disable;
	}
</style>